<template>
    <div class="userinfo">
      <div class="userinfo-wrapper" v-if="data">
        <avatar></avatar>
        <div class="name">{{ data.name }}</div>
        <ul>
          <li>年龄：{{ data.age }}</li>
          <li>添加：{{ data.date }}</li>
        </ul>
        <com-button>发送信息</com-button>
      </div>
    </div>
</template>
<script>
export default {
  name: 'UserInfo',
  props: {
    data: Object
  }
}
</script>
<style lang="scss" scoped>
.userinfo {
  height: 100%;
  background-color: $color-background-l;
  color: $color-text-b;
  font-size: 15px;
  position: relative;
  text-align: center;

  &-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    min-width: 200px;
  }
  .name {
    font-size: 18px;
    margin-top: 12px;
    margin-bottom: 32px;
  }
  ul {
    text-align: left;
    li {
      margin-top: 12px;
    }
  }
  button {
    margin-top: 20px;
    width: 100%;
  }
}
</style>
